<script setup lang="ts">
import {reactive,ref} from "vue";
import Navigate from "@/Components/Navigate.vue";
import router from "@/Router";
import RecommendTitleSvg from "@/svg/RecommendTitleSvg.vue";
import {activeIndex, songSearch} from "@/store/songStore";
import MusicRoomSvg from "@/svg/MusicRoomSvg.vue";
import Love from "@/svg/love.vue";
import HistorySvg from "@/svg/historySvg.vue";


const sendTab = (tabIndex) => {
  songSearch.value =''
  sessionStorage.setItem("currentActiveIndex",tabIndex.toString())
  activeIndex.value = tabIndex
  if(tabIndex==1)
    router.push("/recommend")
  if(tabIndex==2)
    router.push("/music_room")
  if(tabIndex==3)
    router.push("/love")
  if(tabIndex==4)
    router.push("/history")
  if(tabIndex==5)
    router.push("/game")
  if(tabIndex==6)
    router.push("/q_a")
}

</script>

<template>
  <div class="fixed h-full   bg-white select-none flex flex-col justify-start items-center mt--7">
    <div class="logo flex items-center justify-center h-20 select-none  mt-7 mx-5">
      <p class="text-8 font-bold text-gray-6 shadow-xl">不 如 听 歌</p>
    </div>
    <div class="under-logo flex flex-col gap-10 mt-8 text-gray-6 w-45">
      <div class="online-music flex flex-col gap-2  ">
        <div class="text-4 ml-1 text-gray-5">在线音乐</div>
        <button @click="sendTab(1)"
          class="t-recommend hover:bg-yellow-2 rounded-2xl flex gap-3 justify-start items-center py-2 "
          :class="[activeIndex == 1 ? 'active': '']"
        >
<!--          <img src="../img/推荐.png" class="h-12">-->
          <RecommendTitleSvg class="w-8 h-auto ml-3 "></RecommendTitleSvg>
          <p class="text-5">推荐</p>
        </button>
        <button @click="sendTab(2)"
                class="t-music-room hover:bg-yellow-2 rounded-2xl flex gap-3 justify-start items-center py-2   "
                :class="[activeIndex == 2 ? 'active': '']"
        >
          <music-room-svg class="w-8 h-auto ml-3 "></music-room-svg>
          <p class="text-5">音乐馆</p>
        </button>
      </div>

      <div class="my-music flex flex-col gap-2">
        <div class="text-4 ml-1 text-gray-5">我的音乐</div>
        <button @click="sendTab(3)"
                class="t-recommend hover:bg-yellow-2 rounded-2xl flex gap-3 justify-start items-center py-2 "
                :class="[activeIndex == 3 ? 'active': '']"
        >
          <!--          <img src="../img/推荐.png" class="h-12">-->
          <love class="w-8 h-auto ml-3 "></love>
          <p class="text-5">我喜欢</p>
        </button>
        <button @click="sendTab(4)"
                class="t-music-room hover:bg-yellow-2 rounded-2xl flex gap-3 justify-start items-center py-2   "
                :class="[activeIndex == 4 ? 'active': '']"
        >
          <history-svg class="w-8 h-auto ml-3 "></history-svg>
          <p class="text-5">最近播放</p>
        </button>
      </div>

    </div>
  </div>

</template>

<style scoped>
.active{
  @apply bg-yellow-2;
}
div::-webkit-scrollbar {
  display: none;
}

</style>